<template>
  <div class="">
    <div class="my-3 grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      <n-card v-for="(item,index) in list" :key="index">
        <template #cover>
          <RemoteImage :src="item.cover" :height="150"></RemoteImage>
        </template>
        <template #header>
          <n-tooltip>
            <template #trigger>
              <div @click="handlePost(item.id)">
                <h2 class="truncate cursor-pointer text-blue-600 hover:opacity-80 transition-all dark:text-blue-400">
                  {{ item.title }}
                </h2>
              </div>
            </template>
            <h3 class="truncate">
              {{ item.title }}
            </h3>
          </n-tooltip>
        </template>
        <template #header-extra>
          <TextIcon icon="mdi:category" :text="item.categoryName" tip="分类" :size="15"></TextIcon>
        </template>
        <template #footer>
          <div class="flex justify-between items-center">
            <TextIcon tip="作者" icon="mdi:user" :text="item.username" :size="16"></TextIcon>
            <ArrayTag round :tags="item.tags" :size="10"></ArrayTag>
          </div>

          <div class="flex justify-between items-center ">
            <div class="flex space-x-5">
              <TextIcon tip="浏览" icon="ep:view" :text="String(item.views)" :size="16"></TextIcon>
              <TextIcon tip="评论" icon="ant-design:comment-outlined" :text="String(item.comments)"
                        :size="16"></TextIcon>
            </div>
            <div class="text-gray-500 text-sm">{{ dayjs(item.createdAt).format('YYYY-MM-DD HH:mm') }}</div>
          </div>
        </template>
        <template #action>
          <div v-if="openPostPreview" class="h-48 overflow-hidden border-t">
            <n-scrollbar>
              <PreviewMarkdown :id="item.id.toString()" :content="handleContent(item.content)"></PreviewMarkdown>
              <n-button quaternary @click="handlePost(item.id)" v-if="item.content.length>500" block >查看更多</n-button>
            </n-scrollbar>
          </div>
        </template>
      </n-card>
    </div>
    <n-button ref="targetRef" quaternary v-if="list.length<itemCount" @click="handleMore" block>已经到底</n-button>
    <n-button v-else text block>已经到底</n-button>
  </div>
</template>

<script setup lang="ts">
import RemoteImage from "@/components/common/image/RemoteImage.vue";
import ArrayTag from "@/components/pc/tag/ArrayTag.vue";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import dayjs from "@/utils/dayjs";
import PreviewMarkdown from "@/components/common/markdown/PreviewMarkdown.vue";
import {useAppStore} from "@/store";
import {storeToRefs} from "pinia";
import router from "@/router";
import {ref, watch,PropType} from "vue";
import {useElementVisibility} from "@vueuse/core";

const {openPostPreview} = storeToRefs(useAppStore())

defineProps({
  list: {
    type: Array as PropType<IPost[]>,
    default: () => []
  },
  itemCount: {
    type: Number,
    default: 0
  }
})
const emits = defineEmits(['handleMore'])

const targetRef = ref(null)
const targetIsVisible = useElementVisibility(targetRef)

watch(targetIsVisible, () => {
  if (targetIsVisible.value) {
    emits('handleMore')
  }
})

const handleMore=()=>{
  emits('handleMore')
}

const handlePost =(id:string)=>{
  router.push({
    path:`/pc/post/p/${id}`
  })
}
const handleContent = (content: string) => {
  let res = getPairString(content.slice(0, 500))
  if (res === '') {
    res = getPairString(content.slice(0, 1000))
  }
  return res;
}
const getPairString = (str: string) => {
  const regex = /```/g;
  const matches = str.match(regex);
  if (matches && matches.length % 2 === 1) {
    const lastIndex = str.lastIndexOf('```');
    if (lastIndex !== -1) {
      return str.slice(0, lastIndex);
    }
  }
  return str;
}
</script>

<style scoped>

</style>